<template>
  <div class="TitleTop">
    <div class="nav">
      <div class="left">
        <dv-decoration-10 style="width: 60%; height: 5px" />
        <dv-decoration-8
          :color="['rgb(86, 136, 225)', '#000']"
          style="width: 250px; height: 50px; float: right"
        />
      </div>
      <div class="title">
        <p class="content">聚爱数据中心</p>
      </div>
      <div class="right">
        <dv-decoration-10
          style="
            width: 60%;
            height: 5px;
            float: right;
            transform: rotateY(180deg);
          "
        />
        <dv-decoration-8
          :color="['rgb(86, 136, 225)', '#000']"
          :reverse="true"
          style="width: 250px; height: 50px; float: left"
        />
      </div>
    </div>
    <div class="time">
      <div class="content">
        {{ time }}
        <div class="triangle"></div>
      </div>

      <div class="center">
        <dv-decoration-6
          :color="['rgb(86, 136, 225)', 'rgb(92, 242, 203)']"
          style="width: 300px; height: 30px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { filterTime } from "@/assets/js/date";
export default {
  name: "TitleTop",
  data() {
    return {
      time: "",
      timer: null,
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.time = filterTime(9);
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer); //删除定时器
    this.timer = null; //释放空间
  },
};
</script>

<style>
.nav {
  height: 60px;
  display: flex;
}
.nav .left {
  flex: 1;
}
.nav .title {
  flex: 1;
  text-align: center;
  font-size: 25px;
  letter-spacing: 5px;
  color: #fff;
}
.nav .title .content {
  line-height: 5px;
}
.nav .right {
  flex: 1;
}

.time {
  height: 40px;
}
.time .content {
  position: relative;
  font-size: 20px;
  color: #fff;
  width: 25%;
  line-height: 50px;
  height: 40px;
  float: left;
  background-color: rgba(15, 19, 37, 0.8);
}
.time .content .triangle {
  width: 0px;
  height: 0px;
  border-top: 50px solid rgba(0, 0, 0, 0);
  border-right: 50px solid rgba(0, 0, 0, 0);
  border-bottom: 50px solid rgba(15, 19, 37, 0.8);
  border-left: 50px solid rgba(0, 0, 0, 0);
  position: absolute;
  bottom: 0px;
  right: -50px;
}
.time .center {
  width: 300px;
  margin: 0 auto;
}
</style>